<script setup >
import { handleError, onMounted, ref } from "vue";
import axios from 'axios'
// import { getUser } from "../api/user";
const input = ref();
const Node_version = ref();
const readData = ref();
const sendRes = ref();
const tableData = ref([]);
onMounted(() => {
  // 接收preload的函数或变量
  // Node_version.value = window.electronAPI.NODE_VERSION;
  Node_version.value = 20.17;
  
});
//发送信息给electron
const handleClick = async (type) => {
  if (type == "set") {
    //发送消息给渲染进程,监听主进程的消息返回的信息
    window.electronAPI.sendValue(input.value);
    // 接收window.electronAPI.sendValue 返回的数据，通过自定义事件ipc-message
    window.addEventListener("ipc-message", (event) => {
      sendRes.value = event.detail;
    });
  } else {
    //渲染进程异步方法的处理
    window.electronAPI
      .fetchData("异步：" + input.value.value)
      .then((data) => {
        console.log("来自主进程的回复:", data);
        readData.value = data;
      });
  }
};
const getMysqlData = async () => {
  // let data = await window.electronAPI.getMysqlData();
  // if (data.code == 200) tableData.value = data.data;
  axios({
      url: 'http://127.0.0.1:4000/getUser',
      method: 'get',
  }).then((res) => {
    console.log(res, '历史温湿度')
    tableData.value = res.data.data
      console.log(32, tableData.value);
  })
  
};
const showDetail = () => {};
</script>

<template>
  <div style="width: 100%; height: 100%">
    <el-row>
      <el-col :span="8"> NODE的版本：{{ Node_version }} </el-col>
      <el-col :span="8" id="getres"> 发送信息的回应：{{ sendRes }} </el-col>
      <el-col :span="8">读取的数据：{{ readData }}</el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="2">请输入数据：</el-col>
      <el-col :span="6" style="margin-right: 20px">
        <el-input type="text" name="" id="" v-model="input"
      /></el-col>
      <el-col :span="12"
        ><el-button @click="handleClick('set')">发送数据</el-button>
        <el-button @click="handleClick('get')">读取数据</el-button>
        <el-button @click="getMysqlData">获取mysql数据</el-button></el-col
      >
    </el-row>
    <el-divider>以下为读取的数据库信息</el-divider>
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="password" label="password" width="120" />
        <el-table-column prop="userName" label="userName" width="120" />
        <el-table-column prop="createdAt" label="createdAt" width="400" />
        <el-table-column fixed="right" label="Operations" min-width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="showDetail">
              Detail
            </el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<style scoped>
el-button,
el-col {
  margin-left: 10px;
}
</style>
